<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box{
                height: 200px;
                background: yellow;
            }
            span{
                /*
                1.行内元素不支持宽高设置
                2.不支持padding-top,padding-bottom,margin-top,margin-bottom设置
                4.换行被解析
                */
                height: 100px;
                background: red;
                font-size: 30px;
            }
             a{
                 background: blue;
             }
            .box>*{
                /*
                  垂直对齐方式
                  top:顶部对齐
                  bottom:底部对齐
                  middle:中线对齐
                  base-line:基线对齐
                */
                vertical-align: middle;
            }
            /*
              块级元素特点
              1。独占一行
              2.不设置高度的话，高度由内容
              3.不设置高度的话默认满父级
              4.支持所有的CSS样式设置
              常见的块级元素：div，p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dt...
              常见的行内元素：a,span,em,strong,img,input,select,button...

            */

            em{
                /*
                行内块元素：
                1.同时具有块级元素和行内元素
                2.支持所有的CSS样式设置
                3.可以并排显示
                4。换行被解析
                */
                display: inline-block;
                height: 100%;
                /*width: 5px;*/
                background: orange;
            }
        </style>
    </head>
    <body>
    <!--
      CSS:Cascading Style sheets层叠样式表
      外部样式表：单独创建css文件，通过link标签引入进来
      内部样式表：将样式写到head中的style标签中
      行内样式表：将样式写到元素的开始标签中
      CSS语法：
      选择器{
         样式1：值1；
         样式2：值2；
         ....;....
      }
    -->
    <div class="box" -style="background: red;width: 200px;">
        <span>你好</span>
        <a href="http://www.baidu.com">
            百度一下
        </a>
        <em></em>
    </div>

    </body>
</html>